<template>
  <div class="index-wrapper">
    <header>
      <Movies></Movies>
    </header>
    <main class="main">
      <Section></Section>
    </main>
    <nav>
      <Footer></Footer>
    </nav>

  </div>
</template>

<script>

import Movies from './movies/Movies.vue'
import Footer from './footers/Footer.vue'
import Section from './section/Section.vue'

import Vue from 'vue'
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
   components: {
     Movies,
     Section,
    Footer
  }
}
</script>

<style lang="stylus" scoped>
.index-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y auto
  header {
    height: auto;
    background-color: #00C233;
  }

  main {
    flex: 1;
    height: 0.5rem;
  }

  nav {
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
  }
}
</style>
<style lang="stylus">
.index-wrapper
  height 100%
  .main
    width 100%
    overflow hidden
    overflow-y scroll
    padding-bottom 50px
    >section
      width 100%
      height 100%
      padding-bottom  50px
</style>